<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>外边距所带来的问题</title>
		<style type="text/css">
		div{
			width:400px;
			height:200px;
		}
		.box1{
			background-color:pink;
			margin-bottom: 80px;
		}
		.box2{
			background-color:skyblue;
			margin-top: 120px;
		}
		.a1{
			
			background-color: red;
			margin-top: 120px;
			/* border: 5px solid black;
			padding-top: 100px; */
			overflow: hidden;	/* 超出部分:隐藏 */
		}
		.a2{
			width: 200px;
			height: 50px;
			background-color: #ffc0cb;
			margin-top: 100px;
		}
		</style>
	</head>
	<body>
		<!-- 
		外边距带来的第一个问题：相邻块级元素垂直外边距合并(只会取其中最大的外边距值)
			解决方法：一般只给一个盒子设置外边距。
		外边距带来的第二个问题：嵌套块级元素垂直外边距塌陷问题
			解决方法1：给父盒子添加边框
			解决方法2：给父盒子添加内边距
			解决方法3：给父盒子添加overflow:hidden;>开发中常用的
		 -->
		<div class="box1">第一个盒子</div>
		<div class="box2">第二个盒子</div>
		<div class="a1">大盒子<div class="a2">小盒子</div></div>
		
	</body>
</html>
